<template>
  <div class="app-container">
    <div class="screen-warp">
      <div class="screen-header" style="display: flex; gap: 20px">
        <div class="car-warp">
          <div class="car-title">
            <div class="car-left">
              <img
                class="car-title-img"
                src="@/assets/images/ddt/scdd_titbf_icon.png"
                alt=""
                srcset=""
              />
              <span>今日车辆信息</span>
            </div>
            <div class="car-right">
              <div class="car-type-item">
                <span class="greencar"></span>
                <span class="car-text">待调度车辆</span>
              </div>
              <div class="car-type-item">
                <span class="orangecar"></span>
                <span class="car-text">可预调度车辆</span>
              </div>

              <!-- <div class="car-type-item">
                <span class="greycar"></span>
                <span class="car-text">下线车辆</span>
              </div> -->
              <div class="car-type-item">
                <el-button
                  size="mini"
                  circle
                  icon="el-icon-refresh"
                  @click="getScheduling"
                />
              </div>
            </div>
          </div>
          <div class="car-box">
            <div class="tong-car">
              <div class="tong-img">
                <img src="@/assets/images/ddt/tongcar@1x.png" alt="" />
              </div>
              <div class="car-orangecar">
                <div
                  class="car-item"
                  v-for="item in carData.tongPre"
                  :key="item.carNumber"
                >
                  <el-dropdown @command="offLineCar">
                    <car status="orangecar" :carInfo="item" />
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="item">下线</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
              <div class="car-greencar" style="margin-left: 10px">
                <div
                  class="car-item"
                  v-for="item in carData.tongPending"
                  :key="item.carNumber"
                >
                  <el-dropdown @command="offLineCar">
                    <car status="greencar" :carInfo="item" />
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="item">下线</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
              <!-- <div class="car-greycar"></div> -->
            </div>
            <div class="beng-car">
              <div class="beng-img">
                <img src="@/assets/images/ddt/bengcar@1x.png" alt="" />
              </div>
              <div class="car-orangecar">
                <div
                  class="car-item"
                  v-for="item in carData.bengPre"
                  :key="item.carNumber"
                >
                  <el-dropdown @command="offLineCar">
                    <car status="orangecar" :carInfo="item" />
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="item">下线</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
              <div class="car-greencar" style="margin-left: 10px">
                <div
                  class="car-item"
                  v-for="item in carData.bengPending"
                  :key="item.carNumber"
                >
                  <el-dropdown @command="offLineCar">
                    <car status="greencar" :carInfo="item" />
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="item">下线</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
              <!-- <div class="car-greycar"></div> -->
            </div>
          </div>
        </div>
        <div class="unit-warp">
          <div class="uni-title">
            <img
              class="uni-title-img"
              src="@/assets/images/ddt/scdd_titbf_icon.png"
              alt=""
              srcset=""
            />
            <span>今日生产机组状态</span>
          </div>
          <div class="unit-body">
            <div
              class="unit-item"
              v-for="item in sysUnitList"
              :key="item.dictValue"
            >
              <div :class="`unit-item-label status-${item.status}`">
                <span>{{ item.dictLabel }}</span>
              </div>
              <div :class="`unit-item-value status-${item.status}`">
                <span
                  :class="`unit-item-vlaue-icon status-${item.status}`"
                ></span>
                <span>生产中</span>
              </div>
            </div>
          </div>
        </div>
        <div class="st-warp">
          <div class="st-title">
            <div class="st-left">
              <img
                class="st-title-img"
                src="@/assets/images/ddt/scdd_titbf_icon.png"
                alt=""
                srcset=""
              />
              <span>今日调度统计</span>
            </div>
            <div class="st-info">
              <span>查看台账明细</span>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
          <div class="produce-stats">
            <div class="produce-stats-item">
              <span class="t-num">{{ produceStatsData.planVolume }}</span>
              <span class="t-txt"
                >计划生产总量 <span class="unit">(单位)</span>
              </span>
            </div>
            <div class="produce-stats-item">
              <span class="t-num">{{ produceStatsData.productVolume }}</span>
              <span class="t-txt"
                >已生产方量 <span class="unit">(单位)</span>
              </span>
            </div>
            <div class="produce-stats-item">
              <span class="t-num">{{ produceStatsData.carCount }}</span>
              <span class="t-txt"
                >已发车次 <span class="unit">(单位)</span>
              </span>
            </div>
            <div class="produce-stats-item">
              <span class="t-num">{{ produceStatsData.remainderVolume }}</span>
              <span class="t-txt"
                >累计剩砼 <span class="unit">(单位)</span>
              </span>
            </div>
            <div class="produce-stats-item">
              <span class="t-num">{{ produceStatsData.refundedVolume }}</span>
              <span class="t-txt"
                >累计退砼 <span class="unit">(单位)</span>
              </span>
            </div>
            <div class="produce-stats-item">
              <span class="t-num">{{ produceStatsData.transVolume }}</span>
              <span class="t-txt"
                >累计运输量 <span class="unit">(单位)</span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <el-row class="table-warp">
        <el-col :span="24">
          <el-card>
            <div slot="header" class="clearfix">
              <div style="display: flex; justify-content: space-between">
                <div>
                  <span>今日生产中订单</span>
                  <el-button
                    :disabled="selectOrders.length == 0"
                    type="warning"
                    style="margin-left: 20px"
                    size="small"
                    @click="autoMatchFun"
                    >自动匹配砼车</el-button
                  >
                  <el-button
                    :disabled="selectOrders.length == 0"
                    type="danger"
                    size="small"
                    @click="removeMatchFun"
                    >移除砼车匹配</el-button
                  >
                </div>
                <div>
                  <el-button type="primary" @click="getList" size="small"
                    >刷新</el-button
                  >
                  <el-button
                    :disabled="selectOrders.length == 0"
                    @click="wangong"
                    type="success"
                    size="small"
                    >完工</el-button
                  >
                  <el-button
                    :disabled="selectOrders.length == 0"
                    @click="zanting"
                    type="info"
                    size="small"
                    >暂停</el-button
                  >
                </div>
              </div>
            </div>

            <div class="table-box">
              <el-table
                ref="table"
                @current-change="handleCurrentChange"
                v-loading="loading"
                :data="orderList"
                max-height="250"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column
                  width="200"
                  label="操作"
                  align="center"
                  fixed="left"
                >
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="addFt(scope.row)"
                      >新增发砼</el-button
                    >
                    <el-button
                      size="mini"
                      type="text"
                      @click="viewFt(scope.row)"
                      >查看发砼明细</el-button
                    >
                  </template>
                </el-table-column>
                <!-- <el-table-column label="生产顺序" align="center" prop="name" /> -->
                <el-table-column
                  label="订单编号"
                  align="center"
                  prop="orderNumber"
                />
                <el-table-column
                  label="配送方式"
                  align="center"
                  prop="deliveryTpye"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.deliveryTpye == 0">需配送</span>
                    <span v-if="scope.row.deliveryTpye == 1">自提</span>
                  </template>
                </el-table-column>

                <el-table-column
                  label="计划开工时间"
                  width="150px"
                  align="center"
                  prop="startTime"
                />
                <el-table-column
                  label="部位名称"
                  align="center"
                  prop="positionName"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.positionName == 1">墙柱</span>
                    <span v-if="scope.row.positionName == 2">筏板</span>
                    <span v-if="scope.row.positionName == 3">梁板梯</span>
                    <span v-if="scope.row.positionName == 4">梁板柱</span>
                    <span v-if="scope.row.positionName == 5">垫层</span>
                    <span v-if="scope.row.positionName == 6">路面</span>
                    <span v-if="scope.row.positionName == 7">基础承台</span>
                    <span v-if="scope.row.positionName == 8">平</span>
                    <span v-if="scope.row.positionName == 9">屋面找平</span>
                    <span v-if="scope.row.positionName == 10">屋面保护</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="主标号"
                  align="center"
                  prop="primaryDesignatorId"
                />
                <el-table-column
                  label="附加标号"
                  align="center"
                  prop="additionalTitleIds"
                />
                <el-table-column
                  label="计划方量"
                  align="center"
                  prop="squareAmount"
                />
                <el-table-column
                  label="已生产方量"
                  width="100px"
                  align="center"
                  prop="produceVolume"
                />
                <el-table-column
                  label="已运输量"
                  align="center"
                  prop="transVolume"
                />
                <el-table-column
                  label="已发车次"
                  align="center"
                  prop="departCount"
                />
                <el-table-column
                  label="泵送类型"
                  align="center"
                  prop="pumpingId"
                />
                <el-table-column
                  label="工程名称"
                  align="center"
                  prop="engineeringId"
                />
                <el-table-column
                  label="施工单位名称"
                  width="120px"
                  align="center"
                  prop="constructionUnit"
                />
                <el-table-column
                  label="现场联系人"
                  width="120px"
                  align="center"
                  prop="contact"
                />
                <el-table-column
                  width="120"
                  label="联系电话"
                  align="center"
                  prop="phone"
                />
                <el-table-column
                  label="开工说明"
                  align="center"
                  prop="instructions"
                />
                <el-table-column
                  label="要求资料"
                  align="center"
                  prop="information"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.information == 0">否</span>
                    <span v-if="scope.row.information == 1">是</span>
                  </template>
                </el-table-column>
                <el-table-column
                  width="400px"
                  label="已匹配车辆"
                  align="center"
                  fixed="right"
                  class-name="small-padding fixed-width"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.matchCarList">
                      <car
                        :key="item.carNumber"
                        v-for="item in mapCar(scope.row.matchCarList)"
                        :carInfo="item"
                      />
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 发砼明细 -->
    <el-dialog
      title="发砼明细"
      :visible.sync="tongDialog"
      width="1200px"
      append-to-body
    >
      <el-table :data="tongDanList" style="width: 100%">
        <el-table-column prop="id" label="砼单id" width="180">
        </el-table-column>
        <el-table-column prop="concreteNo" label="砼单编号" width="180">
        </el-table-column>
        <el-table-column prop="concreteStatus" label="砼单状态">
          <template slot-scope="scope">
            <span v-if="scope.row.concreteStatus == 3">生产中</span>
            <span v-if="scope.row.concreteStatus == 4">已签收</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="tongQueryParams.total > 0"
        :total="tongQueryParams.total"
        :page.sync="tongQueryParams.pageNum"
        :limit.sync="tongQueryParams.pageSize"
        @pagination="getToneList"
      />
    </el-dialog>

    <ConcreteDialog
      :open.sync="open"
      ref="concreteDialog"
      :sysUnitList="sysUnitList"
    ></ConcreteDialog>
    <SelectCarDialog
      :dialogVisible="selectCar"
      @onClose="selectCar = false"
      @onSubmit="selectTong"
    />
    <SelectCarDialog
      carType="bengPre"
      :dialogVisible="selectBengPreCar"
      :multiple="true"
      @onClose="selectBengPreCar = false"
      @onSubmit="selectBeng"
    />
    <SelectNameDialog
      :dialogVisible="SelectNamedialogVisible"
      :userType="1"
      :userInfoId="0"
      :multiple="true"
      :userList="form.userList"
      @onClose="SelectNamedialogVisible = false"
      @onSubmit="selectName"
    />
  </div>
</template>

<script>
import { getDicts } from "@/api/system/dict/data";
import {
  getOrderList,
  produceStats,
  scheduling,
  updateOrders,
  autoMatch,
  removeMatch,
  addConcrete,
} from "@/api/service/production/dispatchDesk";
import { getOrders } from "@/api/service/orderCenter/custom";
import car from "@/components/Car";
import { offline } from "@/api/service/cars";
import {
  concreteList,
  concreteInfoList,
} from "@/api/service/production/concreteStatistics";
import ConcreteDialog from "./components/ConcreteDialog";
import SelectCarDialog from "@/components/SelectDialog/SelectCarDialog";
import SelectNameDialog from "@/components/SelectDialog/SelectNameDialog";
export default {
  components: {
    car,
    ConcreteDialog,
    SelectCarDialog,
    SelectNameDialog,
  },
  data() {
    return {
      selectCar: false,
      selectBengPreCar: false,
      SelectNamedialogVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      orderList: [],
      total: 0,
      loading: false,

      open: false,

      // 今日车辆信息
      carData: {
        tongPending: [], // 砼车 预调度
        tongPre: [], // 砼车 待调度
        bengPending: [], // 泵车 预调度
        bengPre: [], // 泵车 待调度
      },

      // 今日调度统
      produceStatsData: {
        planVolume: 0,
        transVolume: 0,
        productVolume: 0,
        carCount: 0,
        remainderVolume: 0,
        refundedVolume: 0,
      },
      sysUnitList: [],
      // 已选择的订单
      selectOrders: [],
      selectItem: null,

      tongDialog: false,
      tongDanList: [],
      tongQueryParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        orderNo: null,
      },

      form: {
        tongCar: "",
        bengPre: [],
        userList: [],
      },
      orderInfo: null,
    };
  },
  mounted() {
    this.getList();
    this.getProduceStats();
    // this.getListCars()
    this.getScheduling();
    this.getDicts();
  },
  methods: {
    selectTong(row) {
      this.form.tongCar = row;
    },
    selectBeng(row) {
      this.form.bengPre = row;
    },
    selectName(row) {
      this.form.userList = row;
    },
    async getOrders(id) {
      if (!id) {
        this.$message({
          message: "请先输入订单号",
          type: "warning",
        });
        return;
      }
      const res = await getOrders(id);
      this.orderInfo = res.data;
    },
    async addFt(row) {
      // await this.getOrders(row.id)
      this.$refs.concreteDialog.getOrders(row);
      this.open = true;
    },
    async viewFt(row) {
      await this.getToneList(row.id);
      this.tongDialog = true;
    },
    async getToneList(orderId) {
      const res = await concreteInfoList(orderId);
      this.tongDanList = res.rows;
     // this.tongQueryParams.total = res.total;
    },
    // 下线车辆
    async offLineCar(item) {
      await offline({
        id: item.id,
      });
      this.$modal.msgSuccess("操作成功");
    },
    handleCurrentChange(row) {
      this.selectItem = row;
    },
    async getDicts() {
      const res = await getDicts("sys_unit");
      this.sysUnitList = res.data;
    },
    async removeMatchFun() {
      await removeMatch(this.selectOrders.map((item) => item.id));
      this.$modal.msgSuccess("操作成功");
      this.getList();
      this.selectOrders = [];
    },
    async autoMatchFun() {
      await autoMatch(this.selectOrders.map((item) => item.id));
      this.$modal.msgSuccess("操作成功");
      this.getList();
      this.selectOrders = [];
    },
    async wangong() {
      const that = this;
      this.$modal
        .confirm("确认完工订单吗？")
        .then(function () {
          that.wangongHandler();
        })
        .catch(() => {});
    },
    async wangongHandler() {
      await updateOrders(
        this.selectOrders.map((item) => {
          return {
            id: item.id,
            auditType: 5,
          };
        })
      );
      this.$modal.msgSuccess("操作成功");
      this.getList();
      this.selectOrders = [];
    },
    zanting() {
      const that = this;
      this.$modal
        .confirm("确认暂停订单吗？")
        .then(function () {
          that.zantingHandler();
        })
        .catch(() => {});
    },
    async zantingHandler() {
      await updateOrders(
        this.selectOrders.map((item) => {
          return {
            id: item.id,
            auditType: 4,
          };
        })
      );
      this.$modal.msgSuccess("操作成功");
      this.getList();
      this.selectOrders = [];
    },
    handleSelectionChange(e) {
      this.selectOrders = e;
    },
    mapCar(arr) {
      return arr.map((item) => ({
        ...item,
        status: "",
      }));
    },
    // 今日车辆信息
    async getScheduling() {
      const res = await scheduling();

      this.carData.tongPending = res.data.pendingScheduling
        .filter((item) => item.carType.includes("砼车"))
        .map((item) => ({
          ...item,
          status: "orangecar",
        }));
      this.carData.bengPending = res.data.pendingScheduling
        .filter((item) => item.carType.includes("泵车"))
        .map((item) => ({
          ...item,
          status: "orangecar",
        }));

      this.carData.tongPre = res.data.preScheduling
        .filter((item) => item.carType.includes("砼车"))
        .map((item) => ({
          ...item,
          status: "greencar",
        }));
      this.carData.bengPre = res.data.preScheduling
        .filter((item) => item.carType.includes("泵车"))
        .map((item) => ({
          ...item,
          status: "greencar",
        }));
    },
    // 今日生产中订单
    async getList() {
      const res = await getOrderList(this.queryParams);
      this.orderList = res.rows;
      this.total = res.total;
    },
    // 今日调度统计
    async getProduceStats() {
      const res = await produceStats();
      this.produceStatsData = res.data;
    },
    // getListCars() {
    //   listCars()
    // }
  },
};
</script>


<style lang="scss" scoped>
.car-warp {
  height: 360px;
  flex: 1;
  border-radius: 4px;
  padding: 20px 26px;
  background: #ffffff;

  .car-title {
    display: flex;
    font-weight: bold;
    font-size: 18px;
    justify-content: space-between;
    align-items: center;

    .car-title-img {
      width: 27px;
      height: 24px;
      margin-right: 10px;
    }

    .car-left {
      display: flex;
      align-items: center;
    }

    .car-right {
      gap: 14px;
      display: flex;
      align-items: center;

      .car-type-item {
        display: flex;
        align-items: center;

        .bluecar {
          display: inline-block;
          width: 26px;
          height: 14px;
          background: #409eff;
        }

        .greencar {
          display: inline-block;
          width: 26px;
          height: 14px;
          background: #67c23a;
        }

        .orangecar {
          display: inline-block;
          width: 26px;
          height: 14px;
          background: #f79310;
        }

        .greycar {
          display: inline-block;
          width: 26px;
          height: 14px;
          background: #f46c6c;
        }

        .car-text {
          color: #5f6266;
          font-size: 14px;
        }
      }
    }
  }
}

.unit-warp {
  height: 360px;
  width: 257px;
  border-radius: 4px;
  padding: 20px 26px;
  background: #ffffff;

  .uni-title {
    display: flex;
    font-weight: bold;
    font-size: 18px;

    .uni-title-img {
      width: 27px;
      height: 24px;
      margin-right: 10px;
    }
  }

  .unit-body {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .unit-item {
      margin-top: 26px;

      .unit-item-label {
        width: 84px;
        height: 46px;
        border-radius: 8px;
        font-size: 20px;
        font-weight: bold;

        &.status-1 {
          background: #e6effe;
        }

        &.status-0 {
          background: #f0f9eb;
        }

        display: flex;
        justify-content: center;
        align-items: center;
      }

      .unit-item-value {
        text-align: center;
        margin-top: 4px;
        font-size: 14px;

        &.status-1 {
          color: #005efe;
        }

        &.status-0 {
          color: #67c23a;
        }

        .unit-item-vlaue-icon {
          margin-right: 6px;
          border-radius: 50%;
          display: inline-block;
          width: 8px;
          height: 8px;

          &.status-1 {
            background: #005efe;
          }

          &.status-0 {
            background: #67c23a;
          }
        }
      }
    }
  }
}

.st-warp {
  height: 360px;
  width: 557px;
  border-radius: 4px;
  padding: 20px 26px;
  background: #ffffff;

  .st-title {
    display: flex;
    font-weight: bold;
    font-size: 18px;
    justify-content: space-between;
    align-items: center;

    .st-left {
      display: flex;
      align-items: center;

      .st-title-img {
        width: 27px;
        height: 24px;
        margin-right: 10px;
      }
    }

    .st-info {
      font-size: 14px;
      color: #409eff;
      cursor: pointer;
    }
  }

  .produce-stats {
    display: flex;
    flex-wrap: wrap;

    .produce-stats-item {
      .t-num {
        padding-left: 25px;
        color: #005efe;
        font-size: 36px;
        font-weight: bold;
        text-align: left;
      }

      .t-txt {
        padding-left: 16px;
        font-size: 14px;
        color: #0f0f0f;

        .unit {
          font-size: 14px;
          color: #909398;
        }
      }

      // text-align: center;
      width: 33.33333%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 132px;

      &:nth-child(1) {
        margin-top: 20px;
        //   color: #E6A23C;
      }

      &:nth-child(2) {
        margin-top: 20px;
        //   color: #F56C6C;
      }

      &:nth-child(3) {
        margin-top: 20px;
        //   color: #67C23A;
      }

      &:nth-child(4) {
        //   margin-bottom: 0;
        //   color: #e6a23c;
      }

      &:nth-child(5) {
        //   margin-bottom: 0;
        //   color: #409eff;
      }

      &:nth-child(6) {
        // margin-bottom: 0;
        // color: #F56C6C;
      }

      span:nth-child(1) {
        // color: blue;
        font-size: 30px;
        font-weight: bold;
      }
    }
  }
}

.screen-warp {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;

  .table-warp {
    flex: 1;
  }
}

.app-container {
  min-height: 826px;
  min-width: 1684px;
  background: #e9f0fa;
  margin: 0;
}

.tong-car {
  display: flex;
  align-items: center;
  height: 150px;

  .tong-img {
    margin-right: 10px;
  }

  .car-greencar,
  .car-orangecar {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    //align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding-top: 25px;
    flex-wrap: wrap;
    overflow-x: auto;
  }
}

.beng-car {
  display: flex;
  align-items: center;
  height: 150px;

  .tong-img {
    margin-right: 10px;
  }

  .car-greencar,
  .car-orangecar {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    //align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding-top: 25px;
    flex-wrap: wrap;
    overflow-x: auto;
  }
}

::v-deep .el-table__body tr.current-row > td.el-table__cell,
.el-table__body tr.selection-row > td.el-table__cell {
  background-color: #409eff;
  color: #fff;
}

::v-deep .el-tabs__content {
  max-height: 500px;
  overflow: auto;
}

::v-deep .el-dialog__body {
  max-height: 700px;
  overflow: auto;
}
</style>
